<style include="settings-shared">
  .name[connected] {
    font-weight: 500;
  }

  .state[connected] {
    color: var(--cros-text-color-positive);
  }
</style>
<div focus-row-container>
  <div class="list-item"
      focus-row-control
      focus-type="rowWrapper"
      aria-label$="[[ariaLabel]]"
      role="button"
      selectable
      on-keydown="onKeyDown_"
      on-click="onClick_">
    <iron-icon id="deviceIcon" icon="[[getDeviceIcon_(device)]]">
    </iron-icon>
    <div class="middle">
      <div class="name"
          connected$="[[device.connected]]"
          aria-hidden="true">
        [[getDeviceName_(device)]]
      </div>
      <div class="state secondary"
          connected$="[[device.connected]]"
          hidden$="[[!hasConnectionStatusText_(device)]]">
        [[getConnectionStatusText_(device)]]
      </div>
    </div>
    <template is="dom-if" if="[[shouldShowManagedIcon_]]" restamp>
      <iron-icon id="managedIcon" icon="cr:domain"
          tabindex="0"
          on-mouseenter="onShowTooltip_"
          on-focus="onShowTooltip_"
          aria-label="$i18n{bluetoothManaged}"
          role="img">
      </iron-icon>
    </template>
    <div hidden$="[[!device.paired]]">
      <cr-icon-button id="menuButton"
          class="icon-more-vert"
          focus-row-control
          focus-type="menuButton"
          on-click="onMenuButtonTap_"
          tabindex$="[[tabindex]]"
          title="$i18n{moreActions}"
          on-keydown="ignoreEnterKey_"></cr-icon-button>
    </div>
  </div>
</div>
<cr-action-menu id="dotsMenu" role-description="$i18n{menu}">
  <button class="dropdown-item" on-click="onConnectActionTap_">
    [[getConnectActionText_(device.connected)]]
  </button>
  <button class="dropdown-item" on-click="onRemoveTap_">
    $i18n{bluetoothRemove}
  </button>
</cr-action-menu>
